<template>
	<view style="display: block; align-items: center;text-align: center;">
		<!-- /日记图片轮播 -->
		<view class="swiper_view" style="align-items: center;" v-if="diary.images.length">
			<swiper circular autoplay indicator-dots="true" duration="1000" interval="2000" >
				<block v-for="(image,index) in diary.images" :key="index">
					<swiper-item>
						<image :src="image" style="width: 720rpx; height: 400upx; align-items: center; line-height: 400upx; justify-content: center;" mode="aspectFill"></image>
					</swiper-item>
				</block>
			</swiper>
		</view>
		<view style="display: block;  align-items: center;justify-content: center;text-align: center;justify-items: center;">
			<text class="date" v-if="diary.date">{{diary.date}}</text>
			<view style="display: block;  align-items: center;justify-content: center;justify-items: center;">
				<image :src="diary.weather"  class="weatherPicc" mode="widthFix" v-if="diary.weather"></image>
				<image :src="diary.mood"  class="weatherPicc" mode="widthFix" v-if="diary.mood"></image>
			</view>
		</view>
		<view class="cont"style="display: block;">
			<text class="title" v-if="diary.title">{{diary.title}}</text>
			<text class="contentarea" v-if="diary.content">{{diary.content}}</text>
			<view v-if="diary.location" class="locationarea">
				<image src="../../static/icons/weizhi.png" mode="widthFix"></image>
				<text>{{diary.location}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['diary']
	}
</script>

<style scoped>
	.swiper {
		height: 350upx !important;
	}
	
	.swiper-item {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		height: 350upx;
	}
	.date {
		align-items: center;
		height: 25upx;
		margin: 10upx 0;
		font-size: 35upx;
		color: #2C405A;
		line-height: 25upx;
		font: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	}
	.weatherPicc{
		width: 70upx; height: 70upx ; margin: 10upx 0; align-items: center;  
	}
	.cont{
		display: block; width: 720upx; align-items: center;margin: 10upx 1oupx;
	}
	.title {
		display: block;
		align-items: center;
		margin: 20upx 10upx;
		font-size: 60upx;
		font: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
		height: 50upx;
		line-height: 50upx;
	}
	.title text{
		font-size: 60upx;
		font: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
	}
	
	.contentarea {
		display: block;
		align-items: center;
		width: 680rpx;
		margin: 20upx 20upx;
		font-size: 40upx;
		color: #2C405A;
		font: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
		height: 400upx;
		letter-spacing: 10upx;
		text-align: center;
		justify-content: center;
		line-height: 70upx;
	}
	.contentarea textarea{
		margin-left: 20upx;
		margin-right: 20upx;
		width: 680rpx;
		height: 400upx;
		line-height: 70upx;
		align-items: center;
		font-size: 40px;
		color: #2C405A;
		font: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
		text-align: center;
	}
	
	.locationarea {
		display: flex;
		align-items: flex-end;
		font-size: 35upx;
		height: 30upx;
		justify-content: flex-end;
	}
	
	.locationarea text {
		color: #555555;
		font-size: 35upx;
		font: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
	}
	
	.locationarea image {
		width: 50upx;
		height: 50upx;
		margin: 10upx 0;
		justify-content: right;
	}

</style>
